import { useState, useEffect, useRef, memo } from 'react'
import useStore from '@/store';
import { Outlet } from 'react-router-dom';

import Sidebar from '@/pages/Sidebar';
// import Main from '@/pages/Main/Main';

import Settings from '@/pages/Settings';

import CircularProgress from '@mui/material/CircularProgress';

const useInnerHeight = () => {
    const [currentInnerHeight, setCurrentInnerHeight] = useState(window.innerHeight);

    const handleHeightResize = () => {
        setCurrentInnerHeight(window.innerHeight)

    };

    useEffect(() => {
        // 添加事件监听器
        window.addEventListener('resize', handleHeightResize);
        // 清理事件监听器
        return () => {
            window.removeEventListener('resize', handleHeightResize);
        };
    }, []);

    return currentInnerHeight;
}

const Main = memo(() => {
    return <div style={{ width: '100%', height: '100%' }} ><Outlet /></div>
});

const Home = () => {
    // console.log('home');
    const currentInnerHeight = useInnerHeight();

    // setting visibility
    const [settingsVisibility, setSettingsVisibility] = useState(false)

    // createing dialogue auto fetch
    const creatingUUID = useStore(state => state.creatingUUID);
    const setCreatingUUID = useStore(state => state.setCreatingUUID);
    const handleOpenAILLMAPIFetch = useStore(state => state.handleOpenAILLMAPIFetch);
    const handleAutoGenerateTitle = useStore(state => state.handleAutoGenerateTitle);
    useEffect(() => {
        const generateTitle = localStorage.getItem('generateTitle') ? JSON.parse(localStorage.getItem('generateTitle')) : false
        if (creatingUUID) {
            // console.log('creatingUUID ', creatingUUID);
            handleOpenAILLMAPIFetch(creatingUUID)
            if (generateTitle) handleAutoGenerateTitle(creatingUUID);
            setCreatingUUID(null);
        }

    }, [creatingUUID,])

    // sidebar visibility
    const isMobileView = useStore(state => state.isMobileView);
    const setSidebarVisibility = useStore(state => state.setSidebarVisibility);
    const desktopViewSidebarVisibility = useStore(state => state.desktopViewSidebarVisibility);
    const mobileViewSidebarVisibility = useStore(state => state.mobileViewSidebarVisibility);
    useEffect(() => {
        setSidebarVisibility(isMobileView ? mobileViewSidebarVisibility : desktopViewSidebarVisibility);
    }, [isMobileView, desktopViewSidebarVisibility, mobileViewSidebarVisibility])


    // if (loading) {
    //     return (
    //         <div style={{
    //             height: currentInnerHeight,
    //             display: 'grid',
    //             placeItems: 'center',
    //             backgroundColor: 'rgb(1,1,1)'
    //         }}>
    //             {/* Loading... */}
    //             <CircularProgress size="30px" color='inherit' />
    //         </div>
    //     );
    // }

    // if (isLoading || !data) {
    //     return;
    //     // return <div style={{
    //     //     height: '100%',
    //     //     width: '100%',
    //     //     display: 'grid',
    //     //     placeItems: 'center',
    //     // }}><CircularProgress size="30px" color='inherit' /></div >
    // }

    return (
        <div style={{
            display: 'flex',
            // width: '100%',
            height: currentInnerHeight
        }}>
            <Sidebar setSettingsVisibility={setSettingsVisibility} />
            {/* chatarea */}
            <Main />
            {settingsVisibility &&
                <Settings currentInnerHeight={currentInnerHeight} setSettingsVisibility={setSettingsVisibility} />
            }
        </div>

    );

}

export default Home;
